<template>
    <!-- 宽130 -->
    <div class="side-menu flex-1">
        <header class="title flex items-center">
            组件<Iconfy icon="solar:book-2-bold"/>
        </header>
        <div class="menu flex">
            <a-menu
                class="menu1"
                v-model:openKeys="openKeysSub1"
                v-model:selectedKeys="selectedKeysSub1"
                mode="inline"
                :items="menuOpts"
                @click="handleSub1Click"
            ></a-menu>
            <a-menu
                :class="{isHide:!dataviewLayoutState.isShowChartList}"
                class="menu2"
                v-model:openKeys="openKeysSub2"
                v-model:selectedKeys="selectedKeysSub2"
                mode="inline"
                :items="menuSub2"
                @click="handleSub2Click"
            ></a-menu>
        </div>
    </div>
</template>

<script setup lang="ts">
import Iconfy from '@/components/Iconify/index.vue'
import { withDefaults } from 'vue';
import { useDataViewLayoutStore } from '@/stores/dataviewLayout';
import { storeToRefs } from 'pinia';

const dataviewLayoutStore = useDataViewLayoutStore()
const {dataviewLayoutState} = storeToRefs(dataviewLayoutStore)

withDefaults(defineProps<{
    menuOpts:any[]
    menuSub2:any[]
    totalWidth?:number|string
    selfWidth?:number|string
}>(),{
    totalWidth:330,
    selfWidth:130
})

const emits = defineEmits<{
    (e:'handleSub1Click',event:any):void,
    (e:"handleSub2Click",event:any):void
}>()

// 处理子组件是v-model
const openKeysSub1 = defineModel("openKeysSub1")
const selectedKeysSub1 = defineModel("selectedKeysSub1")
const openKeysSub2 = defineModel("openKeysSub2")
const selectedKeysSub2 = defineModel("selectedKeysSub2")


const handleSub1Click = (e:any)=>{
    emits('handleSub1Click',e)
}

const handleSub2Click = (e:any)=>{
    emits('handleSub2Click',e)
}
</script>

<style lang="scss" scoped>
.isHide{
    width: 0!important;
}
.side-menu{

}
.title{
    padding: 5px;
    height: 40px;
    border-bottom: 1px solid #e8e8e8;
}
.menu{
    .menu1{
        width: 65px;
        height: calc(100vh - 85px);
        overflow: auto;
        &::-webkit-scrollbar {
            width: 6px;
            background: transparent;
            opacity: 0;
            transition: opacity 0.3s;
        }
        &:hover::-webkit-scrollbar {
            opacity: 1;
        }
        &::-webkit-scrollbar-corner,
        &::-webkit-scrollbar-thumb,
        &::-webkit-scrollbar-track {
            border-radius: 4px;
        }
        &::-webkit-scrollbar-corner,
        &::-webkit-scrollbar-track {
            background-color: transparent;
        }
        &::-webkit-scrollbar-thumb {
            background-color: transparent;
        }
        &:hover::-webkit-scrollbar-thumb {
            background-color: #a19e9e;
            &:hover {
                background-color: #ccc;
            }
        }
        :deep(.ant-menu-item){
            display: flex;
            flex-direction: column;
            height: 60px;
            align-items: center;
            justify-content: center;
            padding: 8px 0 0 0 !important;
            .ant-menu-title-content{
                margin: 0;
            }
        }
    }
    .menu2 {
        transition: all 0.3s ease;
        width: 65px;
        height: calc(100vh - 85px);
        overflow-y: auto;
        &::-webkit-scrollbar {
            width: 6px;
            background: transparent;
            opacity: 0;
            transition: opacity 0.3s;
        }
        &:hover::-webkit-scrollbar {
            opacity: 1;
        }
        &::-webkit-scrollbar-corner,
        &::-webkit-scrollbar-thumb,
        &::-webkit-scrollbar-track {
            border-radius: 4px;
        }
        &::-webkit-scrollbar-corner,
        &::-webkit-scrollbar-track {
            background-color: transparent;
        }
        &::-webkit-scrollbar-thumb {
            background-color: transparent;
        }
        &:hover::-webkit-scrollbar-thumb {
            background-color: #a19e9e;
            &:hover {
                background-color: #ccc;
            }
        }
        :deep(.ant-menu-item){
            padding: 2px!important;
            font-size: 12px;
            height: 25px;
            line-height: 25px;
            text-align: center;
        }
    }
}
</style>